$(function () {
  /* 
    1. 查询所有文章类别
    2. 新增分类(难点)
    3. 编辑分类(难点)
    4. 删除分类
  */
  // 1. 查询所有文章类别
  getCategoryList()
  // 封装：把获取文章类别封装成函数
  function getCategoryList() {
    $.ajax({
      method: 'GET',
      url: BigNew.category_list,
      success: (res) => {
        console.log(res.data)
        // 1.3 调用模板
        const htmlStr = template('cateItem', { list: res.data })
        // 1.4  把模板的内容替换到页面中
        $('tbody').html(htmlStr)
      },
    })
  }

  // 2. 模态框中的新增按钮
  $('#addBtn').click(() => {
    // 2.1 获取两个输入框的值：分类名称 和 分类别名
    const name = $('#name').val().trim()
    const slug = $('#slug').val().trim()
    // 2.2 非空判断
    if (name === '' || slug === '') {
      return alert('请输入正确内容')
    }
    // 2.3 发送请求，新增分类
    $.ajax({
      method: 'POST',
      url: BigNew.category_add,
      // 请求参数需要按照接口文档来
      data: { name, slug },
      success: (res) => {
        // 2.4 请求成功业务处理
        // 注意：201 是后端定的，是新增成功的状态码
        if (res.code === 201) {
          // 调用函数，让分类管理列表重新获取最新数据
          getCategoryList()
          // 隐藏模态框
          $('#myModal').modal('hide')
          // 方案1：通过 JQ 清空输入框的内容
          $('#name, #slug').val('')
          // 方案2：通过原生 JS 的 reset() 的重置表单
          // document.querySelector('form').reset()
        }
      },
      // 新增失败的情况
      error: () => {
        alert('❌新增失败，name 或者 slug 已经存在')
      },
    })
  })

  // 3. 给模态框绑定显示事件，当模态框显示的时候会自动触发
  // 🧨注意：新增分类 和 编辑分类 共用同一个模态框，通过分支判断，处理模态框的两种显示情况
  $('#myModal').on('show.bs.modal', function (e) {
    // 3.1 获取触发显示模态框的按钮 文本
    const targetText = $(e.relatedTarget).text().trim()
    // 3.2 情况1：新增分类的模态框，特点：1. 显示新增按钮  2. 两个输入框是空的
    if (targetText === '新增分类') {
      // 显示新增分类按钮，隐藏编辑按钮
      $('#addBtn').show()
      $('#editBtn').hide()
      // 新增分类把两个输入框清空
      $('#name,#slug').val('')
    }
    // 3.3 情况2：编辑分类的模态框，特点：1. 显示编辑按钮  2. 两个输入框是有内容的
    else if (targetText === '编辑') {
      // 显示隐藏分类按钮，显示编辑按钮
      $('#addBtn').hide()
      $('#editBtn').show()
      // 获取编辑按钮对应 tr 行的 分类名称 和 分类别名
      const name = $(e.relatedTarget).parents('tr').children().eq(0).text()
      const slug = $(e.relatedTarget).parents('tr').children().eq(1).text()
      // 把 分类名称 和 分类别名 填写到表单中
      $('#name').val(name)
      $('#slug').val(slug)
      // 获取列表中编辑按钮的自定义 id 属性
      const id = $(e.relatedTarget).attr('data-id')
      // 设置到模态框中的编辑按钮
      $('#editBtn').attr('data-id', id)
    }
  })

  // 4. 模态框中的编辑按钮
  $('#editBtn').click(() => {
    // 按照接口文档，准备好编辑接口所需的 3 个参数
    const id = $('#editBtn').attr('data-id')
    const name = $('#name').val().trim()
    const slug = $('#slug').val().trim()
    // console.log({ id, name, slug })
    if (name === '' || slug === '') {
      return alert('不允许出现空')
    }
    // 发送 ajax 请求更新文章类别
    $.ajax({
      method: 'POST',
      url: BigNew.category_edit,
      data: { id, name, slug },
      success: (res) => {
        // console.log(res)
        if (res.code === 200) {
          // 隐藏模态框
          $('#myModal').modal('hide')
          // 重新获取分类列表数据
          getCategoryList()
        }
      },
      error: () => {
        alert('❌分类或者分类别名重复了')
      },
    })
  })

  // 5. 删除分类
  // 通过事件委托绑定事件，由于内部需要用到 this，所以需要写成 function
  $('tbody').on('click', '.btn-delete', function () {
    // 获取删除按钮自己身上的 id 属性，
    const id = $(this).attr('data-id')
    $.ajax({
      method: 'POST',
      url: BigNew.category_delete,
      data: { id },
      success: (res) => {
        // console.log(res)
        // 删除成功，重新获取分类列表数据
        getCategoryList()
      },
    })
  })
})
